<template>
  <div>
    <div class="table-responsive">
      <h5><span class="badge bg-success">农产品</span></h5>
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">产品</th>
            <th scope="col">价格</th>
            <th scope="col">产地</th>
            <th scope="col">日期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="index in range(0, 5)" :key="index">
            <td>{{ index + 1 }}</td>
            <td>
              <router-link
                :to="{
                  path: '/governmentBroadcastInfo',
                  query: {
                    name: name[index],
                    date: date[index],
                    price: price[index],
                    priceChange: priceChange[index],
                    origin:origin[index],
                  },
                }"
                class="btn"
                >{{ name[index] }}</router-link
              >
            </td>
            <td>{{ price[index] }} ￥</td>
            <td>{{ origin[index] }}</td>
            <td>{{ date[index] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: [],
      price: [],
      origin: [],
      date: [],
      priceChange:[],
      max:'',
      min:'',
    };
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
  },
  mounted() {
    this.axios
      .get("http://122.51.157.58:8081/api-service/getOrderByMarketDate?key=123456")
      .then((body) => {
        var result = body.data;

        for (var i = 0; i < result.data.result.length; i++) {
          this.name.push(result.data.result[i].cateName);
          this.price.push(result.data.result[i].originAvgPrice);
          this.origin.push(result.data.result[i].origin);
          this.date.push(result.data.result[i].marketDate);
          this.priceChange.push(result.data.result[i].originPriceChange);
        }
      });
  },
};
</script>